<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>FillLayer图层</title>
    <style type="text/css">
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    #allmap {
        height: 100%;
        width: 100%;
    }
    ul li {
        list-style: none;
    }
    .btn-wrap {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .btn {
        width: 75px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border: 1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }
    .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
    }
    </style>
    <script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=xc76V8ddYmWQvw1aQtt2cBUgbV3HmQIH"></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>

</head>
<body>
    <div id="allmap"></div>
    <ul class="btn-wrap" style="z-index: 99;">
        <li class="light btn" onclick="addFillLayer()">添加图层</li>
        <li class="night btn" onclick="removeFillLayer()">清除图层</li>
    </ul>
</body>

</html>
<script type="text/javascript">
    var map = new BMapGL.Map('allmap');
    var point = new BMapGL.Point(116.41400, 39.91500);
    map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom(true);
    map.setMapStyleV2({ styleJson: darkStyle });
    var fillLayer = null;
 

 
/**
  * 添加行政区域边界
  * @param districtNames {Array} 行政区域查询名称，类似：["安徽省","合肥市","包河区"]
  */
  function  addDistrict() {
  this.polygonArr = []
  let boundary = new BMap.Boundary();
  boundary.get('飞晟文慧广场', rs => {
    console.log(rs,'=============================');
    if (rs.boundaries.length !== 0) {
      this.map.clearOverlays();
      // 查找最大的区域范围，设置为中心展示区域
      let idx = rs.boundaries.findIndex(item => item === this.findLargest(rs.boundaries))
      for (let i = 0; i < rs.boundaries.length; i++) {
        let ply = new BMap.Polygon(rs.boundaries[i], {
          strokeStyle: 'dashed',
          strokeWeight: 2,   //边框宽度
          strokeColor: "#CB7C93",   //边框颜色
          fillOpacity: 0.1,
          fillColor: " #3A2B5D" //填充颜色
        }); //建立多边形覆盖物
        this.polygonArr.push(ply)
        this.map.addOverlay(ply);  //添加覆盖物
        // 只有查询的行政区域和选择框传入的行政区域对应上了，才设置行政区域居中显示
        if (i === idx && districtNames.length === this.regionInfo.regionDesc.length) {
          this.map.setViewport(ply.getPath());    //调整视野
        }
      }
    }  
  })
}
this.addDistrict()
















    // 添加图层
    function addFillLayer() {
        fetch("https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/fillLayerData.json").then(res => {
            return res.json();
        }).then(testFillData => {
          console.log('-------------',testFillData);
            if (!fillLayer) {
                fillLayer = new BMapGL.FillLayer({
                    crs: 'GCJ02',
                    enablePicked: true,
                    autoSelect: true,
                    pickWidth: 30,
                    pickHeight: 30,
                    selectedColor: '#a1c8ff', // 悬浮选中项颜色
                    border: true, 
                    style: {
                        fillOpacity: .3,
                        strokeWeight: 1,
                        strokeColor: '#0071df',
                        fillColor:"#a1c8ff",
                        type:"dashed"
                         
                    }
                });

                fillLayer.addEventListener('click', function (e) {
                    if (e.value.dataIndex !== -1 && e.value.dataItem) {
                        console.log('click', e.value.dataItem);
                        // 使用样式配置，实现单选或多选效果
                        // this.updateState(e.value.dataIndex, { picked: true }, true);
                    }
                })

            }
            map.addNormalLayer(fillLayer);
            fillLayer.setData(testFillData);
        })
    }
    // 移除图层
    function removeFillLayer() {
        map.removeNormalLayer(fillLayer);
    }
    addFillLayer();
</script>